<template>
  <li class="con-five con-five1" @mouseover="itemMouseOver" @mouseout="itemMouseOut">
    <router-link :to="id|articleDetailsViewUrl" target="_blank">
      <img :src="imgUrl" ref="conimg1"
           class="conimg conimg1" style="display: inline-block; width: 290px; height: 229px;">
      <div class="txt-five">
        <h3>{{title}}</h3>
      </div>
    </router-link>
  </li>
</template>

<script>
  import helper from "@/app/helper";

  export default {
    name: "TourItem",
    props: {
      id: String,
      title: String,
      imgUrl: String,
    },
    // computed: {
    //   detailsUrl() {
    //     return '/news/details/' + this.id
    //   }
    // },
    methods: {
      itemMouseOver() {
        helper.animate(this.$refs.conimg1, {'width': 320, 'height': 253});
      },
      itemMouseOut() {
        helper.animate(this.$refs.conimg1, {'width': 290, 'height': 229});
      },
    }
  }
</script>

<style scoped>

</style>